<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    dialog-width="600px"
    :page-show="pageShow"
    @dialog-close="dialogClose"
  >
    <template #toolPanel >
      <el-dialog title="供货商充值"  size="tiny" width="500px"  :visible.sync="rechargeFormVisible" :close-on-click-modal="false" >
        <el-form :model="rechargeForm" label-width="110px" ref="rechargeForm"  >

          <el-form-item label="供货商名称" prop="username">
            <el-input v-model="rechargeForm.username" :disabled="true" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="剩余金额" prop="upshopbalance" >
            <el-input v-model="rechargeForm.upshopbalance"   :disabled="true" ></el-input>
          </el-form-item>

          <el-form-item label="充扣值选项">
            <el-radio-group v-model="rechargeForm.recharge">
              <el-radio  :label="1">充值</el-radio>
              <el-radio  :label="0">扣款</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="充值金额" prop="rechargeamount" :rules="[
				  { required: true, message: '不能为空'},
				  { type: 'number', message: '金额必须为数字值'}
				]">
            <el-input type="rechargeamount" v-model.number="rechargeForm.rechargeamount" auto-complete="off" @input="rechargeamountchange"  ></el-input>
          </el-form-item>
          <el-form-item label="总金额" prop="sumamount">
            <el-input type="text" v-model="rechargeForm.sumamount" :disabled="true" ></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="rechargeForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button size="small" round @click.native="rechargeFormVisible = false">取消</el-button>
          <el-button size="small" round type="primary" @click.native="rechargeSubmit" >提交</el-button>
        </div>
      </el-dialog>
    </template>
    <template #searchPanel>
      <search-panel :show-add-button="true" :showbatchHandleOpen="true" :showbatchHandleClose="true"
                    :show-search-button="true" @search="search" @insert="handleDataInsert"
                    @batchHandleOpen="batchHandleOpen" @batchHandleClose="batchHandleClose" :left="true">
          <el-form-item label="供货名称:">
            <el-input v-model="filters.shopName" clearable style="width: 200px" placeholder="用户姓名" />
          </el-form-item>
          <el-form-item label="商家编号:">
            <el-input v-model="filters.phonenum" clearable style="width: 200px" placeholder="商家编号" />
          </el-form-item>
<!--          <el-form-item label="APPID:">-->
<!--            <el-input v-model="filters.appid" style="width: 200px" placeholder="APPID" />-->
<!--          </el-form-item>-->
          <el-form-item label="状态:">
            <el-select v-model="filters.userstatus" clearable placeholder="请选择状态">
              <el-option value="0" label="全部">全部</el-option>
              <el-option value="1" label="正常">正常</el-option>
              <el-option value="2" label="关闭">关闭</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input v-model="filters.remark" maxlength="500" clearable />
          </el-form-item>
      </search-panel>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :width="230"
        :isShowSelection="true"
        :current="start"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @selection-change="selsChange"
      >
        <template #action="{row}">
          <el-button type="button" size="small" round @click="editRow(row)">编辑</el-button>
          <el-button type="button" size="small" round @click="rechargeEdit(row)">充扣值</el-button>
          <el-button type="button" size="small" round @click="handleEnableShop(row)">{{row.user.userstatus == 2 ? '启用' : '禁用'}}</el-button>
        </template>
      </data-table>
    </template>

    <template #dialog>
      <el-form :model="form" label-width="120px" ref="form">
        <el-form-item label="省份" prop="provinceuuid"  >
          <el-select v-model="form.provinceuuid" filterable clearable
                     remote placeholder="请选择省份" style="width: 429px;">
            <el-option
              v-for="item in options"
              :key="item.provinceuuid"
              :label="item.provincename"
              :value="item.provinceuuid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供货商名称" prop="username">
          <el-input v-model="form.username" clearable auto-complete="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="商家账号" prop="phonenum">-->
        <!--<el-input v-model="form.phonenum"  ></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="公司名称" >
          <el-input v-model="form.wechatid" clearable auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="商家编号" prop="shopnum">
          <el-input v-model="form.shopnum" clearable  ></el-input>
        </el-form-item>
        <el-form-item label="商家APPID" prop="appId">
          <el-input v-model="form.appId" clearable ></el-input>
        </el-form-item>
        <el-form-item label="商家密匙" prop="upkey">
          <el-input v-model="form.upkey" clearable ></el-input>
        </el-form-item>
        <el-form-item label="重复提交次数" prop="repeatNum">
          <el-input v-model="form.repeatNum" placeholder="重复提交次数,0 不重复提交" clearable ></el-input>
        </el-form-item>
        <el-form-item label="提醒金额">
          <el-input v-model="form.noticeBalance" clearable ></el-input>
        </el-form-item>
        <!--<el-form-item label="余额查询地址" prop="shopnum">-->
        <!--<el-input v-model="form.queryBalanceAddress"  ></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="订单提交地址" prop="shopnum">
          <el-input v-model="form.orderCommitAddress" clearable ></el-input>
        </el-form-item>
        <el-form-item label="订单查询地址" prop="shopnum">
          <el-input v-model="form.orderStatusAddress" clearable ></el-input>
        </el-form-item>
        <el-form-item label="平台回调地址" prop="shopnum">
          <el-input v-model="form.orderCallAddress" clearable ></el-input>
        </el-form-item>
        <!--<el-form-item label="密码" prop="password">-->
        <!--<el-input v-model="form.password"  ></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="渠道商ip" prop="upshopip">-->
        <!--<el-input v-model="form.upshopip" ></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="备注">
          <el-input type="textarea" clearable v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer el-dialog__footer">
        <el-row style="text-align: center;">
           <el-button round size="small" @click.native="dialogVisible = false">取消</el-button>
        <el-button round size="small" type="primary" @click.native="onSubmit">提交</el-button>
        </el-row>
      </span>
    </template>

  </base-layout>
</template>

<script>
import baseMixin from '@/mixins/base'
import {findUpUser , changeQuerySwitch ,updatePressOrder,noticeUpSwitch,updateArtificial ,handleEnableShop ,
  addUpUser ,updateUser,findOneShopInfo,upRecharge} from '@/api/upapi'
import { findAllPro } from '@/api/utilsapi'


export default {
  name: 'upInfo',
  components: { },
  mixins: [
    baseMixin({
      idName: 'id',
      refresh: '',
      findData : findUpUser,
      format(res) {
        return res.map(data => {
          return data
        })
      }
    })
  ],
  data() {
    return {
      buttons: [],
      sels:[],
      options:[],
      pageShow: true,
      rechargeFormVisible:false,
      dialogData:{},
      tableColumnAttributes: [
        //供货名称	商家编号	商户余额	累计加款	提交次数	通知金额 状态	创建时间	压单	人工	查询开关	余额通知	备注
        { name: '供货名称', value: 'username' , formatter : this.userNameFormatter , width: 110},
        { name: '商家编号', value: 'shopnum' },
        { name: '商户余额', value: 'upshopbalance'},
        { name: '累计加款', value: 'totalMoney' },
        { name: '提单次数', value: 'repeatNum' },
        { name: '通知金额', value: 'repeatNum' },
        { name: '状态', value: 'status' , formatter : this.userstatusFormatter },
        { name: '压单', value: 'pressOrder' , type:'switchoff' , changeFunc : this.changePressOrder },
        { name: '人工', value: 'artificial', type:'switchoff' , changeFunc : this.changeArtificial },
        { name: '查询', value: 'querySwitch', type:'switchoff' , changeFunc : this.changeQuerySwitch },
        { name: '余额通知', value: 'noticeSwitch', type:'switchoff' , changeFunc : this.noticeUpSwitch },
        { name: '创建时间', value: 'createtime', width: 150 },
        { name: '备注', value: 'remark', formatter : this.remarkFormatter },
      ],
      filters: {
        shopName: '',
        phonenum: '',
        userstatus: '',
        appid:'',
        shopnum:'',
        remark:''
      },
      form : {
        username: '',
        phonenum: '',
        password: '',
        usertype: '4',
        upshopip: '',
        provinceuuid: '',
        shopnum: '',
        remark: '',
        upkey:'',
        orderCommitAddress:'',
        queryBalanceAddress:'',
        orderCallAddress:'',
        orderStatusAddress:'',
        appId:'',
        repeatNum:'',
        wechatid:'',
        noticeBalance:0
      },
      rechargeForm:{
        upshopbalance:'',
        rechargeamount:0,
        sumamount:'',
        upshopuuid:'',
        remark:'',
        recharge:1,
        username:''
      },
    }
  },
  methods: {
    async search(form){
      let para = {
        shopName: this.filters.shopName,
        start: 0,
        pageSize: 10,
        // shopnum:this.filters.shopnum,
        phonenum: this.filters.phonenum ,
        userstatus: this.filters.userstatus == 0 ? "" : this.filters.userstatus ,
        // appid: this.filters.appid,
        remark: this.filters.remark
      };
      this.searchOptions = para;
      this.setTableData()
    },
    userNameFormatter(row){
      return row.user.username;
    },
    remarkFormatter(row){
      return row.user.remark;
    },
    userstatusFormatter(row){
      return row.user.userstatus == 1 ? '启用' : '禁用'
    },
    async changeArtificial(row){
      const result = await updateArtificial(row);
      this.resultApply(result);
    },
    async changeQuerySwitch(row){
      const result = await changeQuerySwitch(row);
      this.resultApply(result);
    },
    async noticeUpSwitch(row){
      const result = await noticeUpSwitch(row);
      this.resultApply(result);
    },
    async changePressOrder(row){
      const result = await updatePressOrder(row);
      this.resultApply(result);
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
    batchHandleOpen(){
      this.batachShops("open");
    },
    batchHandleClose(){
      this.batachShops("close");
    },
    batachShops(type){
      if(this.sels.length == 0){
        this.showMsg("请选择渠道",'error')
        return;
      }
      this.$confirm('确认批量关闭or启用该商家状态吗?', '提示', {
        type: 'warning',
        roundButton:true
      }).then(() => {
        for(var i = 0 ; i < this.sels.length ; i++){
          let param = {
            useruuid : this.sels[i].user.useruuid,
            userstatus : type == "close"  ? 2 : 1
          }
          handleEnableShop(param).then( res =>{

          });
        }
        this.showMsg("操作成功",'success');
        this.findUpUser();
      }).catch((e) => {
        console.log(e)
      });
    },
    async findAllPro(){
      const result = await findAllPro({ page: ''});
      this.options = result.data;
    },
    async onSubmit(){
      this.$confirm('确认提交吗？', '提示', { roundButton:true}).then(async () => {
        this.form.usertype = 4;
        if(this.form && this.form.upshopuuid){
          //修改
          let para = Object.assign({}, this.form);
          const result = await updateUser(para);
          this.resultApply(result);
        }else{
          let para = Object.assign({}, this.form);
          para.queryBalanceAddress = '';
          if(!para.noticeBalance){
            para.noticeBalance = 0;
          }
          const result = await addUpUser(para);
          this.resultApply(result);
        }
      });
    },
    editRow(row){
      let para = {
        upshopuuid:row.upshopuuid
      };
      findOneShopInfo(para).then( datas =>{
        let { message, code, data } = datas;
        if (code !== "0") {
          this.$message({
            message: message,
            type: 'error'
          });
        } else {
          this.form.upshopuuid =  data.upshopuuid;
          this.form.username = data.user.username;
          this.form.phonenum = data.user.phonenum;
          this.form.remark = data.user.remark;
          this.form.shopnum = data.shopnum;
          this.form.provinceuuid = data.provincialInformation.provinceuuid;
          this.form.useruuid = data.user.useruuid;
          this.form.orderCommitAddress= data.orderCommitAddress ;
          this.form.queryBalanceAddress = data.queryBalanceAddress;
          this.form.orderStatusAddress = data.orderStatusAddress;
          this.form.orderCallAddress = data.orderCallAddress;
          this.form.upkey = data.upkey;
          this.form.appId = data.appId;
          this.form.repeatNum = data.repeatNum;
          this.form.wechatid = data.user.wechatid;
          this.form.noticeBalance = data.noticeBalance;
          this.dialogTitle = "编辑";
          this.dialogVisible = true;
        }
      });
    },
    rechargeEdit(row){
      this.rechargeFormVisible = true;
      this.rechargeForm.upshopbalance = row.upshopbalance;
      this.rechargeForm.upshopuuid = row.upshopuuid;
      this.rechargeForm.username = row.user.username;
      this.rechargeForm.rechargeamount = 0;
    },
     handleEnableShop(row){
      this.$confirm('确认禁用或启用?', '提示', {
        type: 'warning',
        roundButton:true
      }).then(async () => {
        let param = {
          useruuid: row.user.useruuid,
          userstatus: row.user.userstatus == 1 ? 2 : 1
        }
        const result = await handleEnableShop(param);
        this.resultApply(result);
      });
    },
    rechargeamountchange:function(){
      try{
        var reg = new RegExp("^([0-9]|[.][0-9])*$");
        if(reg.test(this.rechargeForm.rechargeamount) ){
          if(this.rechargeForm.recharge == 1){
            this.rechargeForm.sumamount = this.numAdd (this.rechargeForm.upshopbalance,this.rechargeForm.rechargeamount);
          }else{
            this.rechargeForm.sumamount = this.numSubtraction (this.rechargeForm.upshopbalance,this.rechargeForm.rechargeamount);
          }
        }else{
          this.rechargeForm.rechargeamount = "";
        }
      }catch (e){
        console.log(e);
      }
    },
    rechargeSubmit(){
      this.$confirm('确认提交吗？', '提示', {roundButton:true}).then( async () => {
        let para = {
          remark :this.rechargeForm.remark,
          upshopuuid:this.rechargeForm.upshopuuid,
          upshopbalance : this.rechargeForm.rechargeamount,
          recharge:this.rechargeForm.recharge
        };
        const result = await upRecharge(para);
        this.resultSuccess(result);
        this.rechargeFormVisible = false;
      });
    }
  },
  mounted() {
    this.findAllPro();
  }
}
</script>

<style scoped>
  .el-dialog__footer{
    text-align: center;
  }
</style>
